<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        ul>li{list-style-type: none}
    </style>
</head>
<body>
    <div id="app" class="container">
        <h1>The Goods Page</h1>
        <form>
            <ul>
                <li><input type="hidden" v-model="id"></li>
                <li>name</li>
                <li><input v-model="name"></li>
                <li>remark</li>
                <li><textarea v-model="remark" cols="50" rows="3"></textarea></li>
                <li><input type="button" @click="doSaveOrUpdate" value="Save Goods"></li>
            </ul>
        </form>

        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>remark</th>
                    <th>createdTime</th>
                    <th colspan="2">operation</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="g in goods">
                    <td>{{g.id}}</td>
                    <td>{{g.name}}</td>
                    <td>{{g.remark}}</td>
                    <td>{{g.createdTime}}</td>
                    <td><a @click="doDeleteById(g.id)">删除</a></td>
                    <td><a @click="doFindById(g.id)">修改</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var vue =  new Vue({
            el:"#app",
            data: {
                id: "",
                name: "",
                remark: "",
                goods:{}
            },
            methods:{
                doFindById(id) {
                    let url=`goods/doFindById/${id}`;
                    axios.get(url)
                    .then(function (result) {
                        console.log(result.data);
                        this.vue.id = result.data.id;
                        this.vue.name = result.data.name;
                        this.vue.remark = result.data.remark;
                    })
                },
                doSaveOrUpdate() {
                    let url = this.id?"/goods/doUpdateGoods":"/goods/doSaveGoods";
                    let params = {"id":this.id,"name": this.name, "remark": this.remark};
                    console.log(params);
                    axios.post(url,params)
                    .then(function (result) {
                        alert(result.data);
                        this.vue.doFindGoods();
                        this.vue.id = "";
                        this.vue.name = "";
                        this.vue.remark = "";
                    })
                },
                doDeleteById(id) {
                    let url = "/goods/doDeleteById/"+id;
                    axios.get(url)
                    .then(function (result) {
                        alert(result.data);
                        this.vue.doFindGoods();
                    })
                },
                doFindGoods() {
                    let url="/goods/doFindGoods";
                    axios.get(url).then(result=> {
                        console.log(result.data);
                        this.goods = result.data;
                    });
                }
            },
            mounted() {
                this.doFindGoods();
            }
        });
    </script>
</body>
</html>